<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/jquery.fullpage.css"/>
		<link rel="stylesheet" href="css/style.css" />
		<script src="js/jquery-1.12.2.min.js"></script>
		<script src="js/template-native.js"></script>
		<script type="text/template" id="tpl">
			<%for(var i = 0; i < data.length; i++) {%>
				<div>
					<h2><%=data[i].name%></h2>
				</div>
			<%}%>
		</script>
		<script src="js/jquery.easings.min.js"></script>
		<script src="js/scrolloverflow.min.js"></script>
		<script src="js/jquery.fullPage.js"></script>
		
	</head>
	<body>
		
		
		<div id="lang">
			<div class="section section1">
				<h3>第一屏</h3>
				<div class="box"></div>
			</div>
			
			<div class="section section2">
				<h3>第二屏</h3>
				<div class="slide">
					<h1>1</h1>
				</div>
				<div class="slide">
					<h1>2</h1>
				</div>
				<div class="slide">
					<h1>3</h1>
				</div>
			</div>
			
			<div class="section section3">
				<h3>第三屏</h3>
			</div>
			
			<div class="section section4">
				<h3>第四屏</h3>
			</div>
		</div>
		
		
		<script>
		
			$(function(){
			    $('#lang').fullpage({
				    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
					navigation: true,
					navigationPosition: 'right',
					navigationTooltips: ['第一屏','第二屏','第三屏','第四屏'],
					slidesNavigation: true,
					
			    });
			});
		
		
		
		
		
		
			var _ = function(selector){
				return document.querySelector(selector);
			};
			
			var meta = {
				data: [{name: "zhang"}, {name: "li"}, {name: "yuwen"}]
			};
			
			var html = template("tpl", meta);
			
			_(".box").innerHTML = html;
			
		</script>
	</body>
</html>
